tags: 鐵人賽 React javascript nodejs vscode

鐵人賽第九天，週末的早晨下了場大雨，但絕對澆不熄我們的熱情，立馬上工!

關於Object

• Object就像一個收納櫃一樣，藉由小標籤(key)來收納對應的物品(value)。
• 有接觸過python dict的朋友，應該對Object不陌生，一樣藉由獨特的key值來妥善記錄你的內容。
  

熱身一下，先來個基本的object練習

新增一個object

• 以上圖為例，要宣告一個物件，並塞入相關的key與值，你有幾種方式可以完成

// example1: 宣告物件並在裡頭定義
let orderList = new Object({coke: 25, burger: 50, pie:35})

// example2: 花括號直接定義
let orderList = {
coke: 25, 
burger: 50, 
pie: 35
}; 

新增物件的內容

• 三種方法，一次滿足

// 你可以這樣
orderList.steak = 180;

// 也可以這樣
orderList["steak"] = 180; 

// 也能這樣!
Object.assign(orderList, {steak:180})

簡短幾句就能搞定~ Shorthand property

• 這個方法是我覺得object最酷的地方，之前剛看到時，一時恍神，覺得怎突然間key和value都搞定了。
• 這大大節省了我們程式碼的數量，例如：我們在一個function的開頭，定義了這些變數，最後，要用object將這些打包，只要用花括號，並用逗號將這些變數放入，打完，收工!

let coke = 25
let burger = 50
let pie = 35

...
...

newOrderList = {coke, burger, pie} // { coke: 25, burger: 50, pie: 35 }

給我一台一樣的車，但裡面的輪子我要用米其林的～Spread Syntax

• Spread Syntax的概念，就像買了一台車，但我們想要客製化配件，與眾不同，帥麻

let car = {color:"White", wheels:"Yokohama"}; 
//{ color: 'White', wheels: 'Yokohama' }


let myCar = {...car, color:"Red", wheels:"Michelin" } 
//{ color: 'Red', wheels: 'Michelin' }

你、你、還有你跟我出公差，其他的跟著班長去跑三千～Rest Syntax

• 上面這句話，有當過兵的男生應該不陌生
• JS object提供這樣的功能，讓你可以限定提取特定的變數出來，其他的用一個變數打包。

let soldiers = {a:1, b:2, c:3, d:4, e:5};  
{a, b, ...others} = soldiers;

console.log(a); // 1
console.log(b); // 2
console.log(others) //<-- 另外打包帶走

• 提取的變數，如果想變更你可以這樣做

• 方法如右: 提取的key值: 你定義的新變數，把提取的value放這邊

let soldiers = {a:1, b:2, c:3, d:4, e:5};  
{a:Kevin, b:Ronan, ...others} = soldiers;

console.log(Kevin); // 1
console.log(Ronam); // 2

for...in 來遍歷Object中的所有key值

let soldiers = {a:1, b:2, c:3, d:4, e:5}; 

for(name in soldiers){
  console.log(name)  // 依序印出 a, b, c, d, e
}

將Object中的key或value單獨提取出來，成為一個Array

• 如果我們想要將這key或value單獨提取出來，並存成Array，你可能第一部會想到用下面這個例子

• 範例1: 繁多的程式碼

let soldiers = {a:1, b:2, c:3, d:4, e:5}; 

let keyList = [];
ley valueList = []; 
for(name in soldiers){
  keyList.push(name);  //<--組成key的array
  valueList.push(soldiers[name]); //<--組成value的array
}

• 太多的程式碼，一點都跟不上流行，其實，Object內建的函式庫讓我們兩三下搞定

Object.keys

let soldiers = {a:1, b:2, c:3, d:4, e:5}; 

Object.keys(soldiers) // [ 'a', 'b', 'c', 'd', 'e' ]

Object.values

let soldiers = {a:1, b:2, c:3, d:4, e:5}; 

Object.values(soldiers) // [ 1, 2, 3, 4, 5 ]

什麼，還可以這樣接續下去，太潮了～

• 還記得昨天React菜雞-Day8教的Array func吧，你可以結合這玩意，讓程式接續下去

let soldiers = {a:1, b:2, c:3, d:4, e:5}; 

Object.values(soldiers).map((v)=>console.log(v+100)); // 印出 101 102 103 104 105

結論

• 一個好的程式必需兼具簡短、易懂，今天我們好好認識了Object，可以幫助我們建構出簡短、易懂的程式，對我們寫React將有大大的幫助。?
• 鐵人賽第九天，你沒有因為週末假日而偷懶，給自己一點掌聲，告訴自己～敲棒的